<template>
	<view class="content">
		<u-popup v-if="curd"  mode="center" :show="showPop" @close="closePop" :round="50">
			<view class="pop project-pop">
				<view class="title">
					<text>{{type == 'add' ? '添加' : '修改'}}停电</text>
				</view>
				<view class="body">
				</view>
			</view>
		</u-popup>
		<u-datetime-picker
			v-if="curd"
			:show="showTime" 
			closeOnClickOverlay 
			mode="date"
			v-model="timeStamp"
			@confirm="confirmTime" 
			@cancel="showTime = false" 
			@close="showTime = false">
		</u-datetime-picker>
		<view class="custom-button-wrapper" v-if="curd">
<!-- 			<view class="custom-button" @click="handleShowPop('update')">修改</view>
			<view class="custom-button" @click="handleShowPop('add')">添加</view> -->
		</view>
		<view class="section-0">
			<view class="section-body">
				<view class="peoject-name">
					<view class="title">项目名称</view>
					<view class="name">
						<text>{{name}}</text>
						<!-- <view class="iconfont icon-xiangyou1"></view> -->
					</view>
				</view>
				<timeLine :list="list"></timeLine>
			</view>
		</view>
	</view>
</template>

<script>
	const riskMap = {
		sb_name: {
			type: 'text',
			name: '停电设备',
			filter: (val) => val
		},
		td_day: {
			type: 'text',
			name: '停电天数',
			filter: (val) => val
		},
		gc_fl: {
			type: 'text',
			name: '工程分类',
			filter: (val) => val
		},
		sb_type: {
			type: 'text',
			name: '停电设备类型',
			filter: (val) => val
		},
		gc_xz: {
			type: 'text',
			name: '工程性质',
			filter: (val) => val
		},
		work_dw: {
			type: 'text',
			name: '工作单位',
			filter: (val) => val
		},
		work_detail: {
			type: 'text',
			name: '工作内容',
			filter: (val) => val
		},
		factory_stations: {
			type: 'text',
			name: '停电厂站',
			filter: (val) => val
		},
		is_high_risk: {
			type: 'text',
			name: '五级电网风险',
			filter: (val) => val
		},
		risk_desc: {
			type: 'text',
			name: '五级电网风险描述',
			filter: (val) => val
		},
		
		start_date: {
			type: 'text',
			name: '计划开始时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		end_date: {
			type: 'text',
			name: '计划结束时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		start_date_real: {
			type: 'text',
			name: '实际开始时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		end_date_real: {
			type: 'text',
			name: '实际结束时间',
			filter: (val) => val ? val.substring(0, 10) : '-'
		},
		file_path: {
			type: 'image',
			name: '风险管控图',
			filter: (val) => {
				return [{
					url: val ? val : '-'
				}]
			}
		},
	}
	import {
		powerInfoApi
	} from '@/api/statistics.js';
	import {
		addOutageApi, updateOutageApi
	} from '@/api/outage.js'
	import { mapGetters, mapActions} from 'vuex';
	import timeLine from '@/components/time_line/danduzujian.vue';
	export default {
		components: { timeLine },	
		data() {
			return {
				name: '',
				id: '',
				list: [],
				curd: 0,
				showPop: false,
				form: {},
				type: 'add',
				info: {},
				showTime: false,
				timeType: '',
				timeStamp: Number(new Date())
			};
		},
		methods:{
			confirmTime(val) {
				const timeStamp = val.value;
				this.form[this.timeType] = this.formatDate(timeStamp);
				this.closeShowTime();
			},
			formatDate(timeStamp) {
				const date = new Date(timeStamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				const Y = date.getFullYear() + '-';
				const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				const D = date.getDate() < 10? '0' + date.getDate() : date.getDate();
				const h = date.getHours() < 10? '0' + date.getHours() : date.getHours();
				const m = date.getMinutes() < 10? '0' + date.getMinutes() : date.getMinutes();
				const s = date.getSeconds() < 10? '0' + date.getSeconds() : date.getSeconds();;
				return Y + M + D;
			},
			handleShowTime(type) {
				this.timeType = type;
				this.showTime = true;
			},
			closeShowTime() {
				this.showTime = false;
			},
			addOutage(obj) {
				uni.showLoading({
					title: '加载中...'
				});
				addOutageApi({...obj}).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title: '操作成功',
							duration: 1000,
							icon: 'success'
						});
						this.closePop();
						uni.hideLoading();
					} else {
						uni.showToast({
							title: '操作失败',
							duration: 1000,
							icon: 'error'
						});
						uni.hideLoading();
					}
				});
			},
			updateOutage(obj) {
				updateOutageApi({...obj}).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title: '操作成功',
							duration: 1000,
							icon: 'success'
						});
						this.closePop();
						this.fetchData();
						uni.hideLoading();
					} else {
						uni.showToast({
							title: '操作失败',
							duration: 1000,
							icon: 'error'
						});
						uni.hideLoading();
					}
				});
			},
			clearForm() {
				for (let key in this.form) {
					this.form[key] = ''
				}
			},
			handleShowPop(type) {
				this.clearForm();
				if (type == 'update') {
					this.form = JSON.parse(JSON.stringify(this.info));
				}
				this.type = type;
				this.showPop = true;
			},
			closePop() {
				this.showPop = false;
			},
			
			go(item) {
				uni.navigateTo({
					url: '/pages/statistics/today/risk/info/detail/index'
				})
			},
			async fetchData() {
				uni.showLoading({
					title: '加载中...'
				});
				
				const {
					data
				} = await powerInfoApi({
					id: this.id
				});
				uni.hideLoading();
				if (data.code === 1) {
					let arr = [];
					let res = data.data;
					console.log(res,'接口拿到的数据')
					for (let key in riskMap) {
						let item = {};
						if (riskMap[key]) {
							var type = riskMap[key].type
							item = {
								title: riskMap[key].name,
								content: {
									type: type,
									value: riskMap[key].filter(res[key])
								}
							}
							arr.push(item);
						}
					}
			    if (res.is_high_risk === '否' ||res.is_high_risk === ''||res.is_high_risk === null||res.is_high_risk === '_') {
						const arr1 = []
						this.list = arr.filter(item => {
							if (item.title !== '风险管控图' && item.title !== '五级电网风险描述') {
								return arr1.push(item)
							}
						})
					} else {
						this.list = arr;
						console.log(this.list,'筛选后的数据')
					}
					this.info = res
				}
			}
		},
		onLoad(data) {
			this.id = data.risk_id
			this.name = data.project_name;
			this.curd = data.curd;
		},
		onReady() {
			this.fetchData();
		}
	}
</script>

<style lang="scss" scoped>
	.pop-custom-button-wrapper{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	.pop {
		width: 671rpx;
		padding-bottom: 40rpx;
		background-color: #fff;
		border-radius: 35rpx;
		overflow: hidden;
	
		.title {
			width: 100%;
			height: 96rpx;
			line-height: 96rpx;
			background-color: #1534ce;
			font-size: 42rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 4rpx;
			color: #ffffff;
			text-align: center;
		}
		
		.body{
			.section-pop {
				width: 100%;
				height: calc(100vh - 450rpx);
				border-radius: 50rpx;
				background-color: #fafbfd;
				padding-top: 50rpx;
				padding-bottom: 20rpx;
				box-shadow: 0rpx -10rpx 29rpx 8rpx rgba(#bcbcb5, 0.19);
				position: relative;
				top: 0;
			}
			.form-item {
			
				width: 600rpx;
				
				line-height: 48rpx;
				margin: 0 auto;
				margin-bottom: 25rpx;
				display: flex;
				align-items: center;
			
				&:last-child {
					margin-bottom: 34rpx;
				}
			
				&.upload-wrap {
					align-items: unset;
					height: unset;
					line-height: unset;
				}
			
				@include clear();
			
				.label {
					float: left;
					width: 130rpx;
					height: 48rpx;
					text-align: left;
					line-height: 44rpx;
					font-size: 26rpx;
					color: #46464a;
				}
			
				/deep/ .u-upload__wrap {
					// width: calc(100% - 206rpx) !important;
					width: calc(100%) !important;
					background-color: transparent;
				}
			
				.icon-tupian {
					position: absolute;
					right: 25rpx;
					line-height: 44rpx;
					color: #1534ce;
					font-size: 28rpx;
				}
			
				/deep/ .u-radio-label--left {
					margin-right: 55rpx;
				}
			
				/deep/ .u-radio__text {
					font-size: 26rpx !important;
					color: #46464a !important;
				}
			
				.input {
					float: left;
					width: calc(100% - 134rpx - 3rpx);
					border-radius: 20rpx;
					border: solid 2rpx #1534ce;
			
					.input-body {
						box-sizing: border-box;
						width: 100%;
						height: 44rpx;
						padding: 0 !important;
						border: none;
						padding-left: 30rpx !important;
						padding-right: 30rpx !important;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.8);
						line-height: 44rpx;
						/deep/ .uni-input-input{
							font-size: 26rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: rgba(0, 0, 0, 0.8);
						}
					}
					.text-body {
						box-sizing: border-box;
						width: 100%;
						padding: 0 !important;
						border: none;
						padding-left: 30rpx !important;
						padding-right: 30rpx !important;
						padding-top: 15rpx;
						padding-bottom: 15rpx;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.8);
						line-height: 30rpx;
						border-radius: 20rpx;
						/deep/ .uni-textarea-textarea{
							font-size: 26rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: rgba(0, 0, 0, 0.8);
						}
					}
			
					.input-placeholder {
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.5);
					}
				}
			
			}
		}
	}
	
	.content{
		background-color: #fff;
	}
	.custom-button-wrapper{
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 40rpx;
		position: fixed;
		bottom: 30rpx;
		z-index: 99;
		.custom-button{
			width: 250rpx;
			box-shadow: 0rpx 13rpx 35rpx 0rpx rgba(60, 90, 214, 0.42);
		}
	}
	.section-0{
		width: 100%;
		background-color: #3a5df5;
		.section-body{
			padding-top: 50rpx;
			.peoject-name{
				margin-bottom: 65rpx;
				width: 100%;
				height: 158rpx;
				background-color: #ffffff;
				border-radius: 35rpx;
				box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
				.title{
					width: 533rpx;
					height: 50rpx;
					padding-top: 15rpx;
					line-height: 50rpx;
					border-bottom: solid 3rpx #f2f2f0;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #8497ac;
					margin-left: 35rpx;
				}
				.name{
					box-sizing: border-box;
					padding: 0 35rpx;
					width: 100%;
					height: 80rpx;
					// line-height: 80rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #46464a;
					.iconfont{
						float: right;
						font-size: 30rpx;
						color: #3b3c40;
					}
				}
			}
			box-sizing: border-box;
			width: 100%;
			padding-left: 40rpx;
			padding-right: 40rpx;
			padding-bottom: 100rpx;
			background-color: #fff;
			background-size: cover;
			background-repeat: no-repeat;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
		}
	}
</style>